<template>
	<view class="container">
		<uni-nav-bar left-icon="left" backgroundColor="transparent" :border="false" color="#fff"
			@clickLeft="onClickNavBack">
			<view class="nav-title">{{getText(transferData.type)}}</view>
		</uni-nav-bar>
		<view class="balance">
			<view class="value">{{balanceInfo.greenEnergy}}</view>
			<view class="title">可转换绿色能量（个）</view>
		</view>
		<view class="transfer-box">
			<view class="transfer" :style="customStyle">
				<view class="transfer-value">
					<view class="top">
						<view class="title">
							开始转换
						</view>
						<view class="allTransfer" @click="transferData.value=balanceInfo.greenEnergy">
							全部转换
						</view>
					</view>
					<view class="content">
						<view class="title-text">
							绿色能量
						</view>
						<view class="">
							<input style="font-size: 12px" type="number" v-model="transferData.value"
								placeholder="请输入转换数量（个）" inputmode="decimal" placeholder-style="font-size: 12px" />
						</view>
					</view>
				</view>
				<view class="rate">
					<text style="color: #EC3218;">*</text>
					<text v-if="transferData.type=='SURPLUS'">转换率：1绿色能量=2元</text>
					<text v-if="transferData.type=='ORIGINAL_ENERGY'">转换率：1绿色能量=1原始能量</text>
				</view>
				<view class="get" v-if="transferData.value>0">
					<view v-if="transferData.type=='SURPLUS'">可获得余额{{transferData.value*2 }}元</view>
					<view v-if="transferData.type=='ORIGINAL_ENERGY'">可获得原始能量{{transferData.value}}个</view>

				</view>
			</view>
		</view>
		<button size="default" type="default" class="submit" hover-class="none" @click="submit">立即转换</button>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		// computed
	} from 'vue';
	import assetApi from '@/sheep/api/member/asset'
	import transferApi from '@/sheep/api/member/transfer'
	const balanceInfo = ref({})
	//获取余额
	const getBalance = async () => {
		let res = await assetApi.getAssetDetails('GREEN_ENERGY')
		console.log('获取余额', res)
		// setTimeout(() => {
		if (res.code == 0) {
			balanceInfo.value = res.data
		}

	}
	// const getValue = computed(() => {
	// 	if (transferData.type == "originalEnergy") {
	// 		return transferData.value * 1
	// 	}
	// 	if (transferData.type == "surplus") {
	// 		return transferData.value * 2
	// 	}

	// })
	const getText = (type) => {
		switch (type) {
			case 'ORIGINAL_ENERGY':
				return '转换原始能量'
				break;
			case 'SURPLUS':
				return '转换余额'
				break;
			default:
				break;
		}
	}

	const onClickNavBack = () => {
		uni.navigateBack()
	}
	const customStyle = ref('')
	const getElementStyle = () => {
		const systemInfo = uni.getSystemInfoSync()

		let windowWidth = systemInfo.windowWidth

		let styleObj = {
			width: windowWidth - 2 * 10 + 'px',

		}
		customStyle.value = styleObj
	}
	onShow(() => {
		getBalance()
		getElementStyle()
	})
	const transferData = reactive({
		type: '',
		value: undefined,
	})
	const submit = async () => {
		if (transferData.value < 1) {
			uni.showToast({
				title: '转换数量不能小于1',
				icon: 'none'
			})
			return
		}
		if (!transferData.value) {
			uni.showToast({
				title: '请输入转换数量',
				icon: 'none'
			})
			return
		}

		if (transferData.value > balanceInfo.value.greenEnergy) {
			uni.showToast({
				title: '绿色能量不足',
				icon: 'none'
			})
			return
		}
		console.log('transferData', transferData)

		let data = {
			// type: 'GREEN_ENERGY',
			value: transferData.value
		}
		let res = ''
		if (transferData.type == "SURPLUS") {
			res = await transferApi.EnergypoolToSurplus(data)
		} else {
			res = await transferApi.EnergypoolToOriginal(data)
		}
		console.log('res', res);
		if (res.code == 0) {
			console.log('res.data', res.data);
			uni.showToast({
				title: res.data,
				icon: 'success',
				// success: () => {
				// 	getBalance()
				// }
			})
			setTimeout(() => {
				getBalance()
			}, 3000)
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'error',

			})
		}
	}

	onLoad((ops) => {
		console.log('ops', ops);
		transferData.type = ops.type
	})
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(to bottom, #2E54DF, #F6F6FA 50%);
	}

	.container {
		.nav-title {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-items: center;
			justify-content: center;
			flex: 1;
		}

		.balance {
			text-align: center;
			margin: 30px 0;

			.value {
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
			}

			.title {
				font-size: 26rpx;
				color: #fff;
				margin-top: 10px;
			}
		}

		.transfer-box {
			display: flex;
			justify-content: center;

			.transfer {
				padding: 20px 10px;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 10px;

				.transfer-value {
					padding: 10px;
					box-sizing: border-box;
					background: #EDF1FF;
					border-radius: 10px;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							font-size: 28rpx;
							font-weight: bold;
						}

						.allTransfer {
							color: #6F99F4;
							font-size: 11px;
							border: 1px solid #6F99F4;
							padding: 2px 5px;
							box-sizing: border-box;
							border-radius: 50px;

						}
					}

					.content {
						.title-text {
							color: black;
							font-size: 13px;
							margin: 10px 0 20px 0;

						}
					}
				}

				.rate {
					margin: 8px 0;
					font-size: 11px;
				}

				.get {
					font-size: 12px;
					font-weight: 550;
					padding: 15px 10px;
					background: #EDF1FF;
					border-radius: 10px;
				}
			}
		}

		.submit {
			margin-top: 30px;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40px;
			color: #ffffff;
			background: #457CF0;
			width: 70%;
			border-radius: 50px;
			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.2)
		}
	}
</style>